var level = ``;
var curCode = `100000`;//记录当前地图code
var prevCode = ``//上一次code 返回时使用
var curPro = ``;
var curCity = ``;
var geoJson = [];

function getMapData() {
    $.getJSON(`https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${curCode}_full`)
        .done(function (data) {
            geoJson = data
            loadMap();
            setName();
        })
        .fail(function () {
            alert('暂无地图！')
        });
}
function setName() {
    if (level == 'province') {
        $('#pro').show();
        $('#city').hide();

    } else if (level == 'city') {
        $('#city').show();
    } else {
        $('#pro').hide();
        $('#city').hide();
    }
    $('#pro').html('-' + curPro);
    $('#city').html('-' + curCity);
}
function loadMap() {
    var initDom = document.getElementById('map');
    let echartsDom = echarts.init(initDom);
    echartsDom.clear();
    echarts.registerMap('cityMap', geoJson);
    var option = {
        tooltip: {
            show: false,
            trigger: 'item',
            padding: 0,
            borderColor: 'transparent',
            backgroundColor: 'none',
            formatter: function (params) {
                return params.data.name
            },
            textStyle: {
                color: '#fff'
            }
        },
        geo3D:
        {
            type: 'map3D', // 系列类型
            show: false,
            name: 'map3D', // 系列名称
            map: 'cityMap', // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)
            viewControl: { // 用于鼠标的旋转，缩放等视角控制。
                projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
                rotationSensitivity: 10, // 旋转敏感度
                distanceSensitivity: 0.5, // 缩放敏感度
                fovSensitivity: 2, // 视角敏感度
                autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                rotateSensitivity: [1, 1], // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                zoomSensitivity: 2, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                distance: level ? 180 : 150, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                alpha: 70, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                beta: 0, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                minBeta: -300, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                center: [0, -25, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                animation: true, // 是否开启动画。[ default: true ]
                animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
            },
            regionHeight: 1,
            zlevel: -20
        },
        series: [
            {
                type: 'map3D', // 系列类型
                name: 'map3D', // 系列名称
                map: 'cityMap', // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)
                label: { // 标签的相关设置
                    show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
                    padding: [5, 10],
                    lineHeight: 18,
                    color: '#ffeb46',
                    fontSize: 14, // 字体大小
                    opacity: 1, // 字体透明度
                    textStyle: {
                        backgroundColor: 'rgba(0,0,0,.4)',
                        barBorderRadius: '5px',
                        fontWeight: '600'
                    },
                    // fontWeight: 600
                    formatter: function (a) {
                        // return `${a.name}\n${a.data.data.cy}台设备`
                        // return `${a.name}`
                    }
                },
                // 材质
                shading: 'realistic',
                realisticMaterial: {
                    detailTexture: '/images/cz.webp',
                    repeat: 'repeat',
                },
                itemStyle: {
                    opacity: 1, // 透明度
                    borderWidth: 2, //分界线宽度
                    borderColor: "rgba(113, 226, 255)", //分界线颜色  
                },
                emphasis: {
                    show: false
                },
                regionHeight: 0,
                viewControl: { // 用于鼠标的旋转，缩放等视角控制。
                    projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                    autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ] 
                    rotationSensitivity: 10, // 旋转敏感度
                    distanceSensitivity: 0.5, // 缩放敏感度
                    fovSensitivity: 2, // 视角敏感度
                    autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                    autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                    autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                    damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                    rotateSensitivity: [1, 1], // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                    zoomSensitivity: 2, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                    panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                    panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                    rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                    distance: level ? 180 : 150, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                    minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                    maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                    alpha: 70, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                    beta: 0, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                    minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                    maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                    minBeta: -300, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                    maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                    center: [0, -25, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                    animation: true, // 是否开启动画。[ default: true ]
                    animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                    animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
                },
                // regions:regions,
                regionHeight: 5,
                zlevel: -10
            },
            {
                type: 'scatter3D',
                coordinateSystem: 'geo3D',
                symbolSize: 15,
                zlevel: 10,
                label: { // 标签的相关设置
                    show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
                    backgroundColor: {
                        image: '/images/tipPip.png',
                    },
                    padding: [10, 20],
                    position: 'bottom',
                    color: '#fff',
                    fontSize: 16, // 字体大小
                    opacity: 1, // 字体透明度
                    formatter: function (params) {
                        var styleArr = ['cy', 'xw', 'dx', 'zx', 'zy', 'jt']
                        var count = 0;
                        var tmpstr = ``;
                        var curIdx = 0;
                        for (let key in params.data.data) {
                            count += params.data.data[key];
                            tmpstr += `\n{${styleArr[curIdx]}|${key}：}{${styleArr[curIdx]}2|${params.data.data[key]}}`
                            curIdx++
                        }
                        var returnStr = `{title|${params.name}：}{count|${count}}
                                        \n{fgx|-----------------------------------------------}` + tmpstr;
                        return returnStr;
                    },
                    rich: {
                        title: {
                            fontSize: 24,
                            fontWeight: 600,
                            padding: [10, 0, -10, 0],
                        }, count: {
                            fontSize: 28,
                            width: 140,
                            padding: [10, 0, -10, 0],
                            fontFamily: 'unidreamLED'
                        }, fgx: {
                            color: '#dadada',
                            lineHeight: 24
                        }
                        , cy: {
                            fontSize: 18,
                            color: '#16baaa',
                            fontWeight: 600,
                            lineHeight: 32
                        }
                        , cy2: {
                            fontSize: 22,
                            color: '#16baaa',
                            fontFamily: 'unidreamLED'
                        }
                        , xw: {
                            fontSize: 18,
                            color: '#60db8e',
                            fontWeight: 600,
                            lineHeight: 32
                        }
                        , xw2: {
                            fontSize: 22,
                            color: '#60db8e',
                            fontFamily: 'unidreamLED'
                        }
                        , dx: {
                            fontSize: 18,
                            color: '#2faeff',
                            fontWeight: 600,
                            lineHeight: 32
                        }
                        , dx2: {
                            fontSize: 22,
                            color: '#2faeff',
                            fontFamily: 'unidreamLED'
                        }
                        , zx: {
                            fontSize: 18,
                            color: '#ffeb46',
                            fontWeight: 600,
                            lineHeight: 32
                        }
                        , zx2: {
                            fontSize: 22,
                            color: '#ffeb46',
                            fontFamily: 'unidreamLED'
                        }
                        , zy: {
                            fontSize: 18,
                            color: '#ff9f51',
                            fontWeight: 600,
                            lineHeight: 32
                        }
                        , zy2: {
                            fontSize: 22,
                            color: '#ff9f51',
                            fontFamily: 'unidreamLED'
                        }
                        , jt: {
                            fontSize: 18,
                            color: '#fc5531',
                            fontWeight: 600,
                            lineHeight: 32
                        }
                        , jt2: {
                            fontSize: 22,
                            color: '#fc5531',
                            fontFamily: 'unidreamLED'
                        }
                    }
                },
                itemStyle: { //坐标点颜色
                    normal: {
                        show: true,
                        color: '#ffeb46',
                        shadowBlur: 10,
                        shadowColor: '#fff'
                    },
                    emphasis: {
                        areaColor: '#f00'
                    }
                },

            }]
    };
    echartsDom.setOption(option);
    // 监听窗口大小变化
    window.addEventListener('resize', echartsDom.resize);
    echartsDom.off();
    echartsDom.on('click', function (params) {
        $('#goblck').show();
        geoJson.features.forEach(item => {
            if (item.properties.name == params.data.name && (item.properties.level == 'province' || item.properties.level == 'city')) {
                prevCode = curCode;
                level = item.properties.level;//设置当前层级（判断地图视角）
                curCode = item.properties.adcode;// 获取地图文件
                level ? (level == 'province' ? (curPro = item.properties.name) : (curCity = item.properties.name)) : '';
                getMapData(item);
                return false
            }
        })
    });
};

$('#goblck').on('click', function () {
    if (curCode == prevCode) {
        curCode = `100000`;
        level = ``;
        $('#goblck').hide();
    } else {
        curCode = prevCode;
        level = 'province'
    }
    getMapData();
})